<script>
import axios from "axios";

import {quillEditor} from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "../../common/js/quill-config";

export default {
  name: "addDialog",
  components: {
    quillEditor
  },
  data() {
    return {
      quillOptions: quillConfig,
      dialogTableVisible: false,
      dialogFormVisible: false,
      carForm: {
        id: null,
        title: "",
        cover: "",
        saleprice: 0,
        costprice: 0,
        isnew: 0,
        reigstertime: "",
        mileage: null,
        costeffective: 0,
        rushsale: 0,
        quasinewcar: 0,
        transitivecountry: 0,
        carType: {
          id: null,
          name: ""
        },
        typeId: null,
        carDetail: {
          info: ""
        }
      },
      options: [],
      formLabelWidth: '120px',
      value: "",
      a: ""
    }
  },
  methods: {
    sendDataParent: function () {
      this.carForm = {
        id: null,
        title: "",
        cover: "",
        saleprice: 0,
        costprice: 0,
        isnew: 0,
        reigstertime: "",
        mileage: null,
        costeffective: 0,
        rushsale: 0,
        quasinewcar: 0,
        transitivecountry: 0,
        carType: {
          id: null,
          name: ""
        },
        typeId: null,
        carDetail: {
          info: ""
        }
      }
          this.$emit('closeDialog', false);
    },
    insertData() {
      this.form.managerId =
          axios.post("http://localhost:8088/departments", this.form).then(
              function (res) {
                console.log("请求成功")
                console.log(res.data)

              },
              function (error) {
                console.log("请求失败")
              }
          )
      this.$emit('closeDialog', false);
      this.$emit('refresh', true);
    },
    showManager(value) {
      this.form.managerId = value.charAt(value.length - 1)
    }
  },
  props: ['dialogFormShow'],
  mounted() {
  },
  watch: {
    dialogFormShow: function (newValue, oldValue) {
      if (newValue === true) {
        let vue = this
        axios.get("http://localhost:8088/employeeAndRoles/RoleId/" + "1").then(
            function (res) {
              console.log("请求成功")
              console.log(res.data)
              vue.emps = res.data.data
              vue.options = res.data.data
              console.log(vue.options)
            },
            function (error) {
              console.log("请求失败")
            }
        )
      }
    }
  }
}
</script>

<template>
  <el-container>
    <el-dialog title="新增车辆" :visible.sync="dialogFormShow" @close="sendDataParent" :label-width="formLabelWidth">
      <el-form :model="carForm">
        <el-input type="hidden" v-model="carForm.id"></el-input>
        <el-form-item label="标题">
          <el-input v-model="carForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
              class="upload-demo"
              action="http://localhost:8081/files/uploadDFS"
              :on-remove="coverHandleRemove"
              :on-success="coverHandleSuccess"
              :file-list="coverFileList"
              :limit="1"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="carForm.saleprice" style="width:220px;" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="carForm.costprice" style="width:220px;" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否新车">
          <el-radio-group v-model="carForm.isnew">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上牌时间">
          <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="carForm.reigstertime"
              type="date"
              placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="里程数">
          <el-input v-model="carForm.mileage" style="width:220px;" type="number" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="超值">
          <el-radio-group v-model="carForm.costeffective">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="急售">
          <el-radio-group v-model="carForm.rushsale">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="准新车">
          <el-radio-group v-model="carForm.quasinewcar">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可迁全国">
          <el-radio-group v-model="carForm.transitivecountry">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-cascader v-model="carForm.carType"
                       :options="carTypeTree"
                       :props="{
							   checkStrictly: true,
							   label:'name',
							   value:'id'
							}"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item label="基本信息">
          <quill-editor v-model="carForm.carDetail.info" :options="quillOptions">
          </quill-editor>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sendDataParent">取 消</el-button>
        <el-button type="primary" @click="insertData">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<style scoped>

</style>
